<template>
	<div class="w-full slider-content">
		<div class="text-[#96A5AA] text-base h-[18px] leading-[18px]">
			{{ title }}
		</div>
		<div class="pt-[8px] flex">
			<span class="text-[#fff] mr-[12px]">{{ value }}</span>
			<n-slider
				v-model:value="value"
				:disabled="isDisabled || isRuning"
				:step="step"
				:min="min"
				:max="max"
				:on-update:value="handleChange">
				<template #thumb>
					<div
						class="w-[18px] h-[18px] rounded-full border-[2px] border-border-[#ffffff] bg-[#6A45FF]"></div>
				</template>
			</n-slider>
			<span class="text-[#96A5AA] ml-[12px]">{{ max }}</span>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { ref, watch, onMounted } from 'vue'
import { NSlider } from 'naive-ui'
import { setGameCacheData, getGameCacheData } from '../../util'
import { t } from '@/utils'

const props = defineProps({
	isRuning: {
		type: Boolean,
		default: false
	},
	isDisabled: {
		type: Boolean,
		default: false
	},
	defaultValue: {
		type: Number,
		default: 0
	},
	min: {
		type: Number,
		default: 8
	},
	max: {
		type: Number,
		default: 16
	},
	step: {
		type: Number,
		default: 1
	},
	title: {
		type: String,
		default: t('miniGames.row')
	}
})

const value = ref(props.defaultValue)
const emit = defineEmits(['handleChange'])
watch(value, (val: any) => {
	setGameCacheData({
		slider: val
	})
})
onMounted(() => {
	const gameCacheData = getGameCacheData()
	value.value = gameCacheData?.slider || props.defaultValue
	emit('handleChange', value.value)
})
const handleChange = (val: number) => {
	if (props.isRuning || props.isDisabled) {
		return
	}
	value.value = val
	emit('handleChange', val)
}
</script>
<style lang="scss" scoped>
.slider-content {
	:deep(.n-slider-rail__fill) {
		background-color: #ffffff !important;
		// &:hover {
		// 	background-color: #ffffff;
		// }
	}
	:deep(.n-slider-rail) {
		background-color: #3e4c68;
		box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
	}
}
</style>
